<template>
  <view class="">
    <view
      class="u-steps"
      :style="{
        flexDirection: direction,
      }"
    >
      <view
        class="u-steps__item"
        :class="['u-steps__item--' + direction]"
        v-for="(item, index) in list"
        :key="index"
      >
        <view
          class="u-steps__item__num"
          v-if="mode == 'number'"
          :style="{
            backgroundColor: current < index ? 'transparent' : activeColor,
            borderColor: current < index ? unActiveColor : activeColor,
          }"
        >
          <text
            v-if="current < index"
            :style="{
              color: current < index ? unActiveColor : activeColor,
            }"
          >
            {{ index + 1 }}
          </text>
          <!-- <u-icon v-else size="22" :color="iconcolor" :name="icon"></u-icon> -->
          <text :style="{ color: iconcolor, fontWeight: 'bold' }" v-else>{{
            index + 1
          }}</text>
        </view>
        <view
          class="u-steps__item__dot"
          v-if="mode == 'dot'"
          :style="{
            backgroundColor: index <= current ? activeColor : unActiveColor,
          }"
        ></view>
        <text
          class="u-line-1"
          :style="{
            color: index <= current ? activeColor : unActiveColor,
          }"
          :class="['u-steps__item__text--' + direction]"
        >
          {{ item.name }}
        </text>
        <view
          class="u-steps__item__line"
          :class="['u-steps__item__line--' + mode]"
          v-if="index < list.length - 1"
        >
          <u-line
            :direction="direction"
            length="100%"
            :hair-line="false"
            :color="unActiveColor"
          ></u-line>
        </view>
      </view>
    </view>
  </view>


</template><script>
/**
 * steps 步骤条
 * @description 该组件一般用于完成一个任务要分几个步骤，标识目前处于第几步的场景。
 * @tutorial https://www.uviewui.com/components/steps.html
 * @property {String} mode 设置模式（默认dot）
 * @property {Array} list 数轴条数据，数组。具体见上方示例
 * @property {String} type type主题（默认primary）
 * @property {String} direction row-横向，column-竖向（默认row）
 * @property {Number String} current 设置当前处于第几步
 * @property {String} active-color 已完成步骤的激活颜色，如设置，type值会失效
 * @property {String} un-active-color 未激活的颜色，用于表示未完成步骤的颜色（默认#606266）
 * @example <u-steps :list="numList" active-color="#fa3534"></u-steps>
 */
export default {
  name: "u-steps",
  props: {
    // 步骤条的类型，dot|number
    mode: {
      type: String,
      default: "dot",
    },
    // icon颜色
    iconcolor: {
      type: String,
      default: "#fff",
    },
    // 步骤条的数据
    list: {
      type: Array,
      default() {
        return [];
      },
    },
    // 主题类型, primary|success|info|warning|error
    type: {
      type: String,
      default: "primary",
    },
    // 当前哪一步是激活的
    current: {
      type: [Number, String],
      default: 0,
    },
    // 激活步骤的颜色
    activeColor: {
      type: String,
      default: "#2979ff",
    },
    // 未激活的颜色
    unActiveColor: {
      type: String,
      default: "#909399",
    },
    // 自定义图标
    icon: {
      type: String,
      default: "checkmark",
    },
    // step的排列方向，row-横向，column-竖向
    direction: {
      type: String,
      default: "row",
    },
  },
  data() {
    return {};
  },
};
</script>

<style lang="scss" scoped>
// @import "../../libs/css/style.components.scss";
@import "@/uview-ui/libs/css/style.components.scss";

$u-steps-item-number-width: 44rpx;
$u-steps-item-dot-width: 20rpx;

.u-steps {
  @include vue-flex;

  .u-steps__item {
    flex: 1;
    text-align: center;
    position: relative;
    min-width: 100rpx;
    font-size: 26rpx;
    color: #8799a3;
    @include vue-flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;

    &--row {
      @include vue-flex;
      flex-direction: column;

      .u-steps__item__line {
        position: absolute;
        z-index: 0;
        left: 75%;
        width: 50%;

        &--dot {
          top: calc(#{$u-steps-item-dot-width} / 2);
        }

        &--number {
          top: calc(#{$u-steps-item-number-width} / 2);
        }
      }
    }

    &--column {
      @include vue-flex;
      flex-direction: row;
      justify-content: flex-start;
      min-height: 120rpx;

      .u-steps__item__line {
        position: absolute;
        z-index: 0;
        height: 50%;
        top: 75%;

        &--dot {
          left: calc(#{$u-steps-item-dot-width} / 2);
        }

        &--number {
          left: calc(#{$u-steps-item-number-width} / 2);
        }
      }
    }

    &__num {
      @include vue-flex;
      align-items: center;
      justify-content: center;
      width: $u-steps-item-number-width;
      height: $u-steps-item-number-width;
      border: 1px solid #8799a3;
      border-radius: 50%;
      overflow: hidden;
    }

    &__dot {
      width: $u-steps-item-dot-width;
      height: $u-steps-item-dot-width;
      @include vue-flex;
      border-radius: 50%;
    }

    &__text--row {
      margin-top: 14rpx;
    }

    &__text--column {
      margin-left: 14rpx;
    }
  }
}
	.chucuno {
		position: absolute;
		top: 50%;
		margin-top: -150rpx;
		z-index: 99999;
		left: 50%;
		margin-left: -325rpx;
	}

.back-tankuang {
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 99999;
		height: 100%;
		background: rgba(51, 51, 51, 0.5);
	}</style>
